<template>
	<view class="m-approvalShowByDeal">
		<!-- 审批流程显示 -->
		<view>

			<view v-if="status == 0">
				<view class="part" v-for="approvalRow in approvalList" style="margin-bottom: 10px;">
					<view class="pf">
						<view class="label">流程</view>
						<view class="pd">
							<view>
								<view class="flex-box f-r">
									<view class="mark1 npd">
										<view class="line1">
											<view>
												<view class="dis-ib">
													<view class="img1">
														<text>{{ approvalRow.approvalNodeList[0].node[0].Creater
															}}</text>
														<image style="width: 14px; height: 14px;margin-right: 4px;"
															class="sf"
															src="/uni_modules/mc-ui/static/image/success.png">
														</image>
													</view>
												</view>
											</view>
											<view class="line-li1"></view>
										</view>

									</view>
									<view class="flex-main npd">
										<view>
											<view>
												<text>发起审批</text>
												<text
													class="ap-d">{{ approvalRow.approvalNodeList[0].node[0].CreateTime.split('.')[0].replace(/T/g, '') }}</text>
											</view>
											<view class="f-sub">
												{{ approvalRow.approvalNodeList[0].node[0].Creater }}
											</view>
										</view>
										<view class="pl"></view>
									</view>
								</view>
							</view>
							<view v-for="(row, index) in approvalRow.approvalNodeList"
								v-if="row.node[0].ApprovalSort != 0">
								<view class="flex-box f-r">
									<view class="mark1 npd">
										<view class="line1">
											<view>
												<view class="dis-ib">
													<view class="img1">
														<text
															v-if="row.node.length == 1 && row.node[0].CurrentApprovalIDs.length == 1 && row.type == 0">{{ row.node[0].CurrentApprovalIDs[0] }}</text>

														<uni-icons v-else-if="row.type == 1" type="sound" size="28"
															color="#fff" style="padding-top: 7px;"></uni-icons>


														<uni-icons v-else type="staff" size="28" color="#fff"
															style="padding-top: 7px;"></uni-icons>

														<image style="width: 14px; height: 14px;margin-right: 4px;"
															class="sf"
															v-if="approvalRow.level == row.index - 2 && row.type == 1 && row.node[0].Approve != 0"
															src="/uni_modules/mc-ui/static/image/success.png"></image>
														<image style="width: 14px; height: 14px;margin-right: 4px;"
															class="sf" v-if="approvalRow.level >= row.index - 1"
															:src="getApprovalTagImg(row)"></image>
													</view>
												</view>
											</view>
											<view class="line-li1"
												v-if="index != approvalRow.approvalNodeList.length - 1">
											</view>
										</view>

									</view>
									<view class="flex-main npd">
										<view>
											<view>
												<view class="x-bc">
													<view class="x-f">

														<text style="vertical-align: middle;"
															v-if="row.type == 1">抄送人</text>
														<text style="vertical-align: middle;"
															v-else>{{ row.department ? row.department : '审批人' }}</text>
														<view>
															<u-icon name="more-circle-fill" color="#afd6ff" size="20"
																@click="showMore(row)"
																style="vertical-align: middle;padding-left: 5px;"></u-icon>
														</view>
													</view>


													<text class="ap-d"
														v-if="approvalRow.level == row.index - 2 && row.type == 1 && row.node[0].Approve != 0">{{ row.node[0].ApproveTime }}</text>
													<text class="ap-d"
														v-if="approvalRow.level >= row.index - 1">{{ row.node[0].ApproveTime }}</text>
												</view>

												<view class="f-sub" v-if="row.showMore">
													<text
														v-if="row.node.length == 1 && row.node[0].CurrentApprovalIDs.length == 1">{{ row.node[0].CurrentApprovalIDs[0] }}</text>
													<text
														v-if="row.node.length == 1 && row.node[0].CurrentApprovalIDs.length > 1 && row.type == 0">{{ row.node[0].CurrentApprovalIDs.length }}人或签</text>
													<text
														v-if="row.node.length > 1 && row.type == 0">{{ row.node.length }}人会签</text>
													<text
														v-if="row.node.length > 1 && !checkIsSingle(row) && row.type == 0">多人审核</text>
													<text
														v-if="approvalRow.level == row.index - 2 && row.type == 1 && row.node[0].Approve != 0">（已抄送）</text>
													<text
														v-if="approvalRow.level >= row.index - 1">（{{ getApprovalText(row) }}）</text>
												</view>
											</view>
											<view class="hq" v-if="row.showMore">
												<!-- 或签 -->
												<view class="wh"
													v-if="row.node.length == 1 && row.node[0].CurrentApprovalIDs.length > 1">
													<view class="dis2-ib"
														v-for="(item, itemIndex) in row.node[0].CurrentApprovalIDs">
														<view class="dis-ib">
															<view class="img">
																<text>{{ cutStr(item) }}</text>
																<image
																	style="width: 14px; height: 14px;margin-right: 4px;"
																	class="sf"
																	v-if="item == row.node[0].Approver && approvalRow.level >= row.index - 1 && row.node[0].Approve != 0"
																	:src="row.node[0].Approve == 1 ? '/uni_modules/mc-ui/static/image/success.png' : '/uni_modules/mc-ui/static/image/fail.png'">
																</image>
															</view>
															<view class="ap-n">{{ item }}</view>
														</view>
														<view class="dis3-ib"
															v-if="itemIndex != row.node[0].CurrentApprovalIDs.length - 1 && row.type == 0">
															/</view>
														<view class="dis3-ib" v-if="row.type == 1"> </view>
													</view>

												</view>
												<!-- 会签 -->
												<view class="wh" v-if="row.node.length > 1 && checkIsSingle(row)">
													<view class="dis2-ib" v-for="(item, itemIndex) in row.node">
														<view class="dis-ib">
															<view class="img">
																<text>{{ cutStr(item.CurrentApprovalIDs[0]) }}</text>
																<image
																	style="width: 14px; height: 14px;margin-right: 4px;"
																	class="sf"
																	v-if="item.Approver && item.Approver == item.CurrentApprovalIDs[0] && approvalRow.level >= row.index - 1 && item.Approve != 0"
																	:src="item.Approve == 1 ? '/uni_modules/mc-ui/static/image/success.png' : '/uni_modules/mc-ui/static/image/fail.png'">
																</image>
															</view>
															<view class="ap-n">{{ item.CurrentApprovalIDs[0] }}
															</view>
														</view>
														<view class="dis3-ib"
															v-if="itemIndex != row.node.length - 1 && row.type == 0">
															+</view>
														<view class="dis3-ib" v-if="row.type == 1"> </view>
													</view>

												</view>
												<!-- 多人审核 -->
												<view class="wh" v-if="row.node.length > 1 && !checkIsSingle(row)">
													<view class="dis2-ib" v-for="(item, itemIndex) in row.node">
														<view class="dis2-ib"
															v-for="(detail, detailIndex) in item.CurrentApprovalIDs">
															<view class="dis-ib">
																<view class="img">
																	<text>{{ cutStr(detail) }}</text>
																</view>
																<view class="ap-n">{{ detail }}
																</view>
															</view>
															<view class="dis3-ib"
																v-if="itemIndex != row.node.length - 1">/
															</view>
														</view>
														<view class="dis3-ib" v-if="itemIndex != row.node.length - 1">
														</view>
													</view>
												</view>
											</view>
											<view class="pl">
												<view class="plpd" v-for="item in row.node">
													<view>
														<text v-if="item.ApprovalContent"
															:class="'ac-' + item.Approve">{{ item.Approver }}:</text>
														<text v-if="item.ApprovalContent"
															:class="'ac-' + item.Approve">"{{ item.ApprovalContent }}"</text>
													</view>

													<view class="piccontent" v-if="item.Imgs">
														<view class="van-uploader">
															<view class="van-uploader__wrapper x-f"
																style="flex-wrap: wrap;">
																<view class="van-uploader__preview"
																	v-for="(imgItem, imgItemIndex) in (item.Imgs ? item.Imgs.split(',') : [])">
																	<view class="van-image van-uploader__preview-image"
																		style="overflow: hidden; border-radius: 4px;width:60px;height:60px;"
																		@click="previewItemImage(item.Imgs, imgItemIndex, 3)">
																		<view>{{ imgItem }}</view>
																		<image
																			style="width: 40px; height: 40px;margin-right: 4px;object-fit: cover;"
																			:src="processImageUrl(imgItem)"
																			class="van-image__img"></image>
																	</view>
																</view>
															</view>
														</view>
													</view>

												</view>
											</view>
										</view>
									</view>
								</view>

							</view>
						</view>

					</view>
				</view>
			</view>


			<view v-if="(status == 1 || status == 2) && !approvalAgain">
				<view class="part" v-for="approvalRow in approvalList">
					<view class="pf">
						<view class="label">流程</view>
						<view class="pd">
							<view>
								<view class="flex-box f-r">
									<view class="mark1 npd">
										<view class="line1">
											<view>
												<view class="dis-ib">
													<view class="img1">
														<text>{{ approvalRow.approvalNodeList[0].node[0].Creater}}</text>
														<image class="sf"
															style="width: 14px; height: 14px;margin-right: 4px;"
															src="/uni_modules/mc-ui/static/image/success.png" />
													</view>
												</view>
											</view>
											<view class="line-li1"></view>
										</view>

									</view>
									<view class="flex-main npd">
										<view>
											<view>
												<text>发起审批</text>
												<text
													class="ap-d">{{approvalRow.approvalNodeList[0].node[0].CreateTime.split('.')[0].replace(/T/g,'')}}</text>
											</view>
											<view class="f-sub">
												{{ approvalRow.approvalNodeList[0].node[0].Creater }}
											</view>
										</view>
										<view class="pl"></view>
									</view>
								</view>
							</view>
							<view v-for="(row, index) in approvalRow.approvalNodeList">
								<view class="flex-box f-r" v-if="row.node[0].ApprovalSort!=0">
									<view class="mark1 npd">
										<view class="line1">
											<view>
												<view class="dis-ib">
													<view class="img1">
														<text
															v-if="row.node.length == 1 && row.node[0].CurrentApprovalIDs.length == 1 && row.type == 0">{{ row.node[0].CurrentApprovalIDs[0] }}</text>


														<uni-icons v-else-if="row.type == 1" type="sound" size="28"
															color="#fff" style="padding-top: 7px;"></uni-icons>


														<uni-icons v-else type="staff" size="28" color="#fff"
															style="padding-top: 7px;"></uni-icons>

														<image class="sf"
															style="width: 14px; height: 14px;margin-right: 4px;"
															v-if="approvalRow.level == row.index - 2 && row.type == 1 && row.node[0].Approve != 0"
															src="/uni_modules/mc-ui/static/image/success.png" />
														<image class="sf"
															style="width: 14px; height: 14px;margin-right: 4px;"
															v-if="approvalRow.level >= row.index - 1"
															:src="getApprovalTagImg(row)" />
													</view>
												</view>
											</view>
											<view class="line-li1"
												v-if="index != approvalRow.approvalNodeList.length - 1"></view>
										</view>

									</view>
									<view class="flex-main npd">
										<view>
											<view>
												<view class="x-bc">
													<view class="x-f">
														<text style="vertical-align: middle;"
															v-if="row.type == 1">抄送人</text>
														<text style="vertical-align: middle;"
															v-else>{{ row.department ? row.department : '审批人' }}</text>
														<view>
															<u-icon name="more-circle-fill" color="#afd6ff" size="20"
																@click="showMore(row)"
																style="vertical-align: middle;padding-left: 5px;"></u-icon>
														</view>
													</view>
													<text class="ap-d"
														v-if="approvalRow.level == row.index - 2 && row.type == 1 && row.node[0].Approve != 0">{{ row.node[0].ApproveTime }}</text>
													<text class="ap-d"
														v-if="approvalRow.level >= row.index - 1">{{ row.node[0].ApproveTime }}</text>
												</view>
												<view class="f-sub" v-if="row.showMore">
													<text
														v-if="row.node.length == 1 && row.node[0].CurrentApprovalIDs.length == 1">{{ row.node[0].CurrentApprovalIDs[0] }}</text>
													<text
														v-if="row.node.length == 1 && row.node[0].CurrentApprovalIDs.length > 1 && row.type == 0">{{ row.node[0].CurrentApprovalIDs.length }}人或签</text>
													<text
														v-if="row.node.length > 1 && row.type == 0">{{ row.node.length }}人会签</text>
													<text
														v-if="row.node.length > 1 && !checkIsSingle(row) && row.type == 0">多人审核</text>
													<text
														v-if="approvalRow.level == row.index - 2 && row.type == 1 && row.node[0].Approve != 0">（已抄送）</text>
													<text
														v-if="approvalRow.level >= row.index - 1">（{{ getApprovalText(row) }}）</text>
												</view>
											</view>
											<view class="hq" v-if="row.showMore">
												<!-- 或签 -->
												<view class="wh"
													v-if="row.node.length == 1 && row.node[0].CurrentApprovalIDs.length > 1">
													<view class="dis2-ib"
														v-for="(item, itemIndex) in row.node[0].CurrentApprovalIDs">
														<view class="dis-ib">
															<view class="img">
																<text>{{ cutStr(item) }}</text>
																<image class="sf"
																	style="width: 14px; height: 14px;margin-right: 4px;"
																	v-if="item == row.node[0].Approver && approvalRow.level >= row.index - 1 && row.node[0].Approve != 0"
																	:src="row.node[0].Approve == 1 ? '/uni_modules/mc-ui/static/image/success.png' : '/uni_modules/mc-ui/static/image/fail.png'" />
															</view>
															<view class="ap-n">{{ item }}</view>
														</view>
														<view class="dis3-ib"
															v-if="itemIndex != row.node[0].CurrentApprovalIDs.length - 1 && row.type == 0">
															/</view>
														<view class="dis3-ib" v-if="row.type == 1"> </view>
													</view>

												</view>
												<!-- 会签 -->
												<view class="wh" v-if="row.node.length > 1 && checkIsSingle(row)">
													<view class="dis2-ib" v-for="(item, itemIndex) in row.node">
														<view class="dis-ib">
															<view class="img">
																<text>{{ cutStr(item.CurrentApprovalIDs[0]) }}</text>
																<image class="sf"
																	style="width: 14px; height: 14px;margin-right: 4px;"
																	v-if="item.Approver && item.Approver == item.CurrentApprovalIDs[0] && approvalRow.level >= row.index - 1 && item.Approve != 0"
																	:src="item.Approve == 1 ? '/uni_modules/mc-ui/static/image/success.png' : '/uni_modules/mc-ui/static/image/fail.png'" />
															</view>
															<view class="ap-n">{{ item.CurrentApprovalIDs[0] }}</view>
														</view>
														<view class="dis3-ib"
															v-if="itemIndex != row.node.length - 1 && (row.type == 0 || row.type == 1)">
															+</view>
														<!-- <view class="dis3-ib" v-if="row.type == 1"> </view> -->
													</view>

												</view>
												<!-- 多人审核 -->
												<view class="wh" v-if="row.node.length > 1 && !checkIsSingle(row)">
													<view class="dis2-ib" v-for="(item, itemIndex) in row.node">
														<view class="dis2-ib"
															v-for="(detail, detailIndex) in item.CurrentApprovalIDs">
															<view class="dis-ib">
																<view class="img">
																	<text>{{ cutStr(detail) }}</text>
																</view>
																<view class="ap-n">{{ detail }}
																</view>
															</view>
															<view class="dis3-ib"
																v-if="itemIndex != row.node.length - 1">/</view>
														</view>
														<view class="dis3-ib" v-if="itemIndex != row.node.length - 1">
														</view>
													</view>
												</view>
											</view>
											<view class="pl">
												<view class="plpd" v-for="item in row.node">
													<view>
														<text v-if="item.ApprovalContent"
															:class="'ac-' + item.Approve">{{ item.Approver }}:</text>
														<text v-if="item.ApprovalContent"
															:class="'ac-' + item.Approve">"{{ item.ApprovalContent }}"</text>
													</view>

													<view class="piccontent" v-if="item.Imgs">
														<view class="van-uploader">
															<view class="van-uploader__wrapper x-f">
																<view class="van-uploader__preview"
																	v-for="(imgItem, imgItemIndex) in (item.Imgs ? item.Imgs.split(',') : [])">
																	<view class="van-image van-uploader__preview-image"
																		style="overflow: hidden; border-radius: 4px;width:60px;height:60px;"
																		@click="previewItemImage(item.Imgs, imgItemIndex, 3)">

																		<image :src="processImageUrl(imgItem)"
																			class="van-image__img"
																			style="width: 40px; height: 40px;margin-right: 4px;object-fit: cover;" />
																	</view>
																</view>
															</view>
														</view>
													</view>

												</view>
											</view>

										</view>
									</view>
								</view>


							</view>
						</view>

					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	// var vm;
	export default {
		props: {
			option: {
				type: Object,
				default: {
					keyName: '',
					keyValue: '',
					Status: '',
				}
			}
		},
		data() {
			return {
				showLoading: false,
				ifConfirm: false,
				showButton: 0,
				isSubmit: false,
				personList: [],
				approvalAgain: false,

				approvalActions: [],
				selectApprovalData: '',
				approvalList: [],
				approvalProcessList: [],
				status: -1,
				creater: '',
				createTime: '',
				approvalID: 0,
				approveStr: '',
				level: 0,
				finalResult: 0,
				form: {
					id: 0,
					EmplName: '',
					C_Date: '',
					C_VarA: '',
					B_Date: '',
					C_VarE: '',
					C_VarB: '',
					C_Why: ''
				},
				editRemark: true,
				approveMsg: '',
				uploader: [],

			};
		},
		created() {
			let vm = this;
			let that = this;

			setTimeout(function() {
				that.Request.request('getCkUserList', {}, function(res) {
					that.personList = res.data.ds;
					if (that.option['keyValue']) {
						that.status = that.option.Status;
						// that.status = 1;
						that.initPageData(that.option['keyValue']);
					}
				})
			}, 200)
		},
		methods: {
			processImageUrl(url) { // 处理图片链接地址
				if (uni.$m.utils.isEmpty(url)) '';
				url = url.trim();

				function urlRegular(value) {
					return /^((https|http|ftp|rtsp|mms):\/\/)/
						.test(value)
				}

				let isHttp = urlRegular(url);
				if (isHttp) {
					return url;
				} else {
					return this.Request.IPAgreement() + this.Request.serverIP() + url;
				}

			},

			post: function(sql, param, callBack) {
				let vm = this;
				//
				var that = this;
				param["sql"] = sql;
				$.ajax({
					url: "/SQLData/QuerySql",
					type: "post",
					dataType: "json",
					async: false,
					data: param,
					success: function(data) {
						if (data.status == 200) {
							callBack(data.data);
						} else {
							alert(data.msg)
						}
					}
				});
			},
			showMore: function(row) {
				var that = this;
				if (row.showMore) {
					that.$set(row, 'showMore', false);
				} else {
					that.$set(row, 'showMore', true);
				}

			},
			getApprovalProcess: function(id) {
				let vm = this;
				var that = this;

				function recursionFunc(data) {
					var approvalProcessList = [];
					var repeatConfig = function(x, row) {
						var processData = {
							type: row.type,
							approvalType: row.examineMode == 1 ? 0 : 1,
							nodeName: row.nodeName,
							node: [],
							checked: true,
							data: row
						}
						if (row.settype == 7) {
							processData.node.push({
								name: row.examineEndDirectorLevel + '级主管'
							})
						} else {
							processData.node = row.nodeUserList;
						}
						approvalProcessList.push(processData)
						if (row.childNode) {
							repeatConfig(x + 1, row.childNode);
						}
					}
					if (data && data.nodeConfig) {
						data.nodeConfig.childNode && repeatConfig(0, data.nodeConfig.childNode);
					}
					return approvalProcessList;
				}
				//如果id=0，是发起审批状态
				if (id == 0) {
					vm.status = 0;
					var approvalConfigdata = JSON.parse(localStorage.getItem("appConfigStr"));
					var approvalProcessList = recursionFunc(approvalConfigdata);
					var newApprovalProcessList = [];
					if (that.approveStr) {
						newApprovalProcessList = recursionFunc(JSON.parse(that.approveStr));
					}
					for (var i in approvalProcessList) {
						var w = 0;
						for (var j in newApprovalProcessList) {
							if (approvalProcessList[i].nodeName == newApprovalProcessList[j].nodeName) {
								w = 1
								approvalProcessList[i].checked = true;

								for (var m in approvalProcessList[i].node) {
									var v = 0;
									for (var n in newApprovalProcessList[j].node) {
										if (approvalProcessList[i].node[m].name == newApprovalProcessList[j].node[n]
											.name) {
											v = 1;
											approvalProcessList[i].node[m].unJoin = false;
										}
									}
									if (!v) {
										approvalProcessList[i].node[m].unJoin = true;
									}
								}

							}
						}
						if (!w) {
							if (newApprovalProcessList.length) {
								approvalProcessList[i].checked = false;
							} else {
								for (var m in approvalProcessList[i].node) {
									approvalProcessList[i].node[m].unJoin = true;
								}
							}
						}
					}
					that.approvalProcessList = approvalProcessList;
				}

			},
			previewItemImage: function(imgs, index) {
				let vm = this;
				var that = this;
				var array = imgs.split(',');
				let newImgArr = array.map(item => {
					return that.processImageUrl(item)
				})

				// this.$emit('openPreview', newImgArr, index)
				plus.nativeUI.previewImage(newImgArr, {
					current: index,
					loop: true,
					onLongPress: function(e) { // 预览界面长按显示ActionSheet
						plus.nativeUI.actionSheet({
							cancel: "取消",
							buttons: [{
								title: "保存到手机"
							}]
						}, function(event) {
							if (event.index > 0) {
								that.saveImgToLocal(e.url);
							}
						});
					}
				});
			},
			saveImgToLocal(url) {
				let vm = this;
				uni.downloadFile({
					url,
					success: (res) => {
						if (res.statusCode === 200) {
							console.log(res.tempFilePath);

							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath, // 图片文件路径
								success: function() {
									plus.nativeUI.toast("已保存到相册", {
										icon: '/uni_modules/mc-ui/static/image/success.png'
									});
									uni.removeSavedFile({
										filePath: res.tempFilePath,
										complete: function(ret) {
											console.log(ret);
										}
									});
								},
								fail: function(error) {
									plus.nativeUI.toast("图片保存失败，请检查权限");
									uni.removeSavedFile({
										filePath: res.tempFilePath,
										complete: function(ret) {
											console.log(ret);
										}
									});
								}
							});

						}
					}
				})
			},
			filterPersonList: function(str, value) {
				let vm = this;
				var that = this;
				var row = null;
				for (var i in that.personList) {
					if (that.personList[i][str] == value) {
						row = that.personList[i];
						break;
					}
				}
				return row;
			},
			getApprovalTagImg: function(row) {
				let vm = this;
				var that = this;
				if (row.node.length == 1) {
					if (row.node[0].Approve == 0) {
						return '/uni_modules/mc-ui/static/image/doing.png';
					} else if (row.node[0].Approve == 1) {
						return '/uni_modules/mc-ui/static/image/success.png';
					} else if (row.node[0].Approve == 2) {
						return '/uni_modules/mc-ui/static/image/fail.png';
					}
				} else {

					var imgstr = '';
					var z = 0;
					for (var i in row.node) {
						if (row.node[i].Approve == 1) {
							z++;
						}
						if (row.node[i].Approve == 2) {
							imgstr = '/uni_modules/mc-ui/static/image/fail.png';
							break;
						}
					}
					if (imgstr) {
						return imgstr;
					} else {
						if (z == 0) {
							imgstr = '/uni_modules/mc-ui/static/image/doing.png'
						} else {
							if (row.node.length == z) {
								imgstr = '/uni_modules/mc-ui/static/image/success.png'
							} else {
								imgstr = '/uni_modules/mc-ui/static/image/doing.png';
							}
						}

					}
					return imgstr;
				}
			},
			getApprovalText: function(row) {
				let vm = this;
				var that = this;
				if (row.type == 1) {
					if (row.node[0].Approve == 0) {
						return '未抄送';
					} else {
						return '已抄送';
					}
				} else {
					if (row.node.length == 1) {
						if (row.node[0].Approve == 0) {
							return '审批中';
						} else if (row.node[0].Approve == 1) {
							return '已同意';
						} else if (row.node[0].Approve == 2) {
							return '已拒绝';
						}
					} else {
						var str = '';
						var z = 0;
						for (var i in row.node) {
							if (row.node[i].Approve == 1) {
								z++;
							}
							if (row.node[i].Approve == 2) {
								str = '已拒绝';
								break;
							}
						}
						if (str) {
							return str;
						} else {
							if (z == 0) {
								str = '审批中'
							} else {
								if (row.node.length == z) {
									str = '已同意'
								} else {
									str = z + '人同意';
								}
							}

						}
						return str;
					}
				}
			},
			cutStr: function(str) {
				var that = this;
				return str && str.substring(str.length - 2);
			},
			checkIsSingle: function(row) {
				var that = this;
				var x = true;
				for (var i in row.node) {
					if (row.node[i].CurrentApprovalIDs.length > 1) {
						x = false;
					}
				}
				return x;
			},
			initPageData: function(id) {
				let vm = this;
				var that = this;
				var obj2 = {
					P_PKValue: id,
					P_TableName: that.option['globalData'].physicalTableName
				};
				that.Request.request('Select_FlowLog1', obj2, function(res) {

					if (res.data.ds[res.data.ds.length - 1].Approve == 1) {
						that.finalResult = 1;
					}

					var data = [];
					for (var i in res.data.ds) {

						res.data.ds[i].CurrentApprovalIDs = res.data.ds[i].CurrentApprovalIDs.replace(/^,+/,
							"").replace(
							/,+$/, "").split(',');

						for (var c in res.data.ds[i].CurrentApprovalIDs) {
							var row = that.filterPersonList('UserID', res.data.ds[i].CurrentApprovalIDs[c])
							if (row) {
								// res.data.ds[i].CurrentApprovalIDs[c] = row.UserName;
								res.data.ds[i].CurrentApprovalIDs[c] = row.EmplName;
							}

						}

						if (data.indexOf(res.data.ds[i].AuditID) == -1) {
							data.push(res.data.ds[i].AuditID);
						}
					}

					var approvalList = [];
					for (var n in data) {
						var approvalNodeList = [];
						var level = 0;
						var finLevel = 0;
						for (var i in res.data.ds) {
							if (data[n] == res.data.ds[i].AuditID) {

								if (res.data.ds[i].Approve == 0 && !level) {
									level = res.data.ds[i].ApprovalSort;
								}

								if (res.data.ds[i].Approve == 1 && i == res.data.ds.length - 1) {
									level = res.data.ds[i].ApprovalSort;
								}

								if (res.data.ds[i].Approve == 2 && !finLevel) {
									finLevel = res.data.ds[i].ApprovalSort;
								}


								if (res.data.ds[i].Approve == 2 && n == data.length - 1) {
									that.finalResult = 2;
								}



								var x = 0;
								for (var j in approvalNodeList) {
									if (approvalNodeList[j].index == res.data.ds[i].ApprovalSort) {
										x = 1;
										approvalNodeList[j].node.push(res.data.ds[i]);
									}
								}
								if (!x) {
									approvalNodeList.push({
										index: res.data.ds[i].ApprovalSort,
										type: res.data.ds[i].FlowType,
										department: res.data.ds[i].ApprovalName,
										node: [res.data.ds[i]]
									})
								}
							}
						}
						approvalList.push({
							level: finLevel ? (finLevel - 1) : (level - 1),
							approvalNodeList: approvalNodeList
						})
					}


					that.approvalList = approvalList;
				})
			},

			getStrConfigData: function() {
				let vm = this;
				var that = this;

				//生成审批流字符串
				var childNodeList = null;
				for (var i = that.approvalProcessList.length - 1; i >= 0; i--) {
					if (that.approvalProcessList[i].checked) {
						that.approvalProcessList[i].data.childNode = JSON.parse(JSON.stringify(childNodeList));
						childNodeList = that.approvalProcessList[i].data;
						var userList = [];
						for (var j in that.approvalProcessList[i].node) {
							if (!that.approvalProcessList[i].node[j].unJoin) {
								userList.push(that.approvalProcessList[i].node[j])
							}
						}
						childNodeList.nodeUserList = userList;
					}

				}
				var newApprovalConfigdata = JSON.parse(JSON.stringify(approvalConfigdata));
				newApprovalConfigdata.nodeConfig.childNode = childNodeList;
				return JSON.stringify(newApprovalConfigdata)

			},
		}
	}
</script>

<style lang="scss">
	.m-approveList {
		height: 100%;
	}

	.BtnBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100px;
		position: fixed;
		top: 50%;
		left: 0%;
		width: 100%;
		opacity: 0.7;
	}


	.part {
		padding: 15px 15px 0 15px;
	}

	.part .pf {
		border-radius: 6px;
		box-shadow: 0px 1px 5px rgb(200, 198, 198);
		background-color: #fff;
		overflow: hidden;
	}

	.textarea {
		display: block;
	}

	.label {
		padding: 10px 16px;
	}

	.ap-f {
		border-bottom: 1px solid #f7f7f7;
	}

	.f-r {
		/* padding: 17px 0; */
	}

	.mark {
		padding: 17px 15px;
	}

	.mark1 {
		padding: 17px 5px 17px 15px;
		position: relative;
	}

	.f-sub {
		color: #969799;
		font-size: 13px;
		margin-top: 4px;
	}

	.line {
		position: relative;
		width: 30px;
	}

	.line1 {
		width: 60px;
	}

	.line-sq {
		display: inline-block;
		width: 11px;
		height: 11px;
		border-radius: 6px;
		background: #d6d6d6;
		position: absolute;
		left: 0;
		top: 12px;
	}

	.line-li {
		display: inline-block;
		width: 1px;
		background: #d6d6d6;
		position: absolute;
		left: 5px;
		top: -17px;
		bottom: -17px;
	}

	.line-li1 {
		display: inline-block;
		background: #d6d6d6;
		position: absolute;
		top: 52px;
		left: 35px;
		width: 3px;
		bottom: 10px;
	}

	.pd {
		padding: 16px 0;
	}

	.ap-r {
		text-align: right;
		padding-right: 10px;
		/* margin: -8px 0; */
		padding-top: 10px;
	}

	.ap-d {
		text-align: right;
		padding-right: 10px;
		color: #ccccce;
		font-size: 13px;
		float: right;
		padding-top: 3px;
	}

	.img {
		width: 34px;
		height: 34px;
		line-height: 34px;
		text-align: center;
		font-size: 12px;
		color: #fff;
		background-color: #3396fb;
		border-radius: 6px;
		margin: 0 auto;
		position: relative;
		user-select: none;
	}

	.img1 {
		width: 44px;
		height: 44px;
		line-height: 44px;
		text-align: center;
		font-size: 13px;
		color: #fff;
		background-color: #3396fb;
		border-radius: 6px;
		position: relative;
		user-select: none;
	}

	.dis-ib {
		display: inline-block;
		vertical-align: middle;
		text-align: center;
		min-width: 40px;
	}

	.dis2-ib {
		display: inline-block;
		vertical-align: middle;
		padding-bottom: 3px;
		text-align: center;
	}

	.dis3-ib {
		display: inline-block;
		margin: 0 6px;
		color: #969799;
		vertical-align: top;
		padding-top: 7px;
		text-align: center;
	}

	.ap-n {
		padding-top: 2px;
		font-size: 13px;
		color: #969799;
		text-align: center;
	}

	.bottom {
		padding: 8px 15px;
	}

	.part-white {
		padding: 15px;
		background-color: #fff;
		position: relative;
	}

	.title {
		line-height: 40px;
		font-size: 18px;
	}

	.title-sub {
		color: #aaacac;
		font-size: 13px;
	}

	.ap-res {
		color: #a3a3a3;
		font-size: 15px;
		padding-top: 6px;
	}

	.ap-res1 {
		color: #c31616;
		font-size: 15px;
		padding-top: 6px;
	}

	.ap-img {
		position: absolute;
		right: 20px;
		bottom: -38px;
		width: 88px;
		opacity: 0.4;
	}

	.form-row {
		padding: 4px 16px;
	}

	.form-label {
		color: #808991;
		font-size: 13px;
		user-select: none;
	}

	.form-content {
		padding-top: 5px;
	}

	.npd {
		padding-top: 0;
		overflow-x: auto;
	}

	.pl {
		color: #969799;
		font-size: 16px;
		margin: 6px 2px 18px 0;
		min-height: 25px;
		border-bottom: 1px solid #ebedf0;
	}

	.sf {
		width: 16px;
		background: #fff;
		padding: 2px;
		border-radius: 8px;
		position: absolute;
		right: -5px;
		bottom: -2px;
	}

	.select {
		color: #3396fb;
		float: right;
		font-size: 13px;
		padding-top: 3px;
		vertical-align: middle;
	}

	.select a {
		vertical-align: middle;
	}

	.select image {
		width: 16px;
		vertical-align: middle;
	}

	.hq {
		padding: 10px 10px 0 0;
	}

	.wh {

		white-space: nowrap;
		overflow-x: auto;
		padding-right: 10px;
	}

	.plpd {
		padding-bottom: 5px;
	}

	.pictitle {
		line-height: 24px;
		color: #646566;
		user-select: none;
	}

	.piccontent {
		padding-top: 10px;
		overflow: hidden;
	}

	.van-uploader__preview {
		margin-right: 15px;
	}

	.no {
		text-align: center;
		color: #808991;
		font-size: 14px;
	}

	.li1 {
		top: 15px;
	}

	.li2 {
		bottom: 24px;
	}

	.da-c {
		color: #c31616;
	}

	.danger .van-field__control {
		color: #c31616;
	}

	.danger .van-field__label {
		color: #808991;
	}

	.ac-1 {
		color: #03b553;
	}

	.ac-2 {
		color: #c31616;
	}

	.checkbox {
		padding: 25px 5px 10px 10px;
	}

	.jl-remark {
		padding: 5px 0;
		color: #3396fb;
	}

	.memo-l {
		border-bottom: 1px solid rgb(235, 237, 240);
		padding: 4px 0;
	}

	.memo-l:last-child {
		border-bottom: 0;
	}


	* {
		box-sizing: border-box;
	}

	[v-cloak] {
		display: none !important;
	}

	.o-y-a {
		overflow-y: auto;
	}

	image {
		vertical-align: middle;
	}


	/* flex相关 */
	.flex-box {
		display: -webkit-flex;
		display: flex;
	}

	.flex-direction-c {
		flex-direction: column;
	}

	.flex-direction-r {
		flex-direction: row;
	}

	.flex-main {
		flex: 1;
	}
</style>